<template>
  <div class="homePage">
    <!-- 头部 -->
    <el-row class="header">
      <el-col :span="24">
        <Header></Header>
      </el-col>
    </el-row>

    <!-- 轮播图 -->
    <el-row type="flex" justify="center" class="carousel" >
      <el-col :span="20" :xs="23">
        <el-row>
          <el-carousel :interval="3000" :autoplay="true" class="el-carousel" :height="bannerHeight+'px'" indicator-position="outside">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.imgUrl" ref="bannerHeight" @load="imgLoad"/>
            </el-carousel-item> 
          </el-carousel>
        </el-row>
      </el-col>
    </el-row>

    <!-- 用于长度参考 -->
    <!-- <el-row style="margin-bottom:15px">
      <el-col :span="2" style="height:10px;background-color:skyblue;border-radius: 5px;"></el-col>
      <el-col :span="3" style="height:10px;background-color:orange;border-radius: 5px;"></el-col>
      <el-col :span="17" style="height:10px;background-color:skyblue;border-radius: 5px;"></el-col>
      <el-col :span="2" style="height:10px;background-color:orange;border-radius: 5px;"></el-col>
    </el-row> -->

    <!-- 主体内容 -->
    <el-row class="contentContainer" :gutter="30">
      <el-col :lg="{span:3,offset:2}" :md="{span:4,offset:2}" :sm="24">
        <!-- 当屏幕尺寸大于992px，导航栏纵向展示 -->
        <el-row type="flex" justify="center" class="hidden-sm-and-down">
          <el-menu
            default-active="Find"
            class="el-menu-vertical-demo"
            @select="changeNav"
          >
            <el-menu-item index="Find">
              <i class="el-icon-search"></i>
              <span slot="title">浏览</span>
            </el-menu-item>
            <el-menu-item index="Add" :disabled="!canIGetUserInfo">
              <i class="el-icon-circle-plus-outline"></i>
              <span slot="title">新增</span>
            </el-menu-item>
            <el-menu-item index="Update" :disabled="!canIGetUserInfo">
              <i class="el-icon-refresh-left"></i>
              <span slot="title">修改</span>
            </el-menu-item>
            <el-menu-item index="Delete" :disabled="!canIGetUserInfo">
              <i class="el-icon-remove-outline"></i>
              <span slot="title">删除</span>
            </el-menu-item>
            <div style="=height: 50px;font-size: 15px;text-align: center;line-height: 50px;"
              v-show="!canIGetUserInfo"
            >
              部分功能登录后才可使用
            </div>
          </el-menu>
        </el-row>
        
        <!-- 当屏幕尺寸小于992px，导航栏水平展示 -->
        <el-row class="hidden-md-and-up" style="height:50px">
          <el-menu
            default-active="Find"
            mode="horizontal"
            @select="changeNav"
          >
            <el-col :span="6">
              <el-menu-item index="Find">
                <i class="el-icon-search"></i>
                <span slot="title">浏览</span>
              </el-menu-item>  
            </el-col>
            <el-col :span="6">
            <el-menu-item index="Add" :disabled="!canIGetUserInfo">
              <i class="el-icon-circle-plus-outline"></i>
              <span slot="title">新增</span>
            </el-menu-item>
            </el-col>
            <el-col :span="6">
              <el-menu-item index="Update" :disabled="!canIGetUserInfo">
                <i class="el-icon-refresh-left"></i>
                <span slot="title">修改</span>
              </el-menu-item>
            </el-col>
            <el-col :span="6">
              <el-menu-item index="Delete" :disabled="!canIGetUserInfo">
                <i class="el-icon-remove-outline"></i>
                <span slot="title">删除</span>
              </el-menu-item>
            </el-col>
            <!-- <div style="=height: 50px;font-size: 15px;text-align: center;line-height: 50px;"
              v-show="!canIGetUserInfo"
            >
              部分功能登录后才可使用
            </div> -->
          </el-menu>
        </el-row>
      </el-col>


      <el-col :lg="17" :md="{span:16}" :sm="24">
        <div class="contents">
          <Map v-if="currnetNav == 'Find'"></Map>
          <AddRole v-if="currnetNav == 'Add'"></AddRole>
          <UpdateRole v-if="currnetNav == 'Update'"></UpdateRole>
          <DeleteRole v-if="currnetNav == 'Delete'"></DeleteRole>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css'
import Map from "@/components/map";
import Header from "@/components/header";
import AddRole from "@/components/manageRoles/addRole";
import UpdateRole from "@/components/manageRoles/updateRole";
import DeleteRole from "@/components/manageRoles/deleteRole";
import { mapState } from "vuex";
export default {
  data() {
    return {
      currnetNav: "Find",
      bannerHeight:100
    };
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
      userInfo:(state) => state.user.userInfo,
      canIGetUserInfo:(state) => state.user.canIGetUserInfo
    }),
  },
  components: { Map, Header, AddRole, UpdateRole, DeleteRole },
  methods: {
    changeNav(index) {
      this.currnetNav = index;
    },
    imgLoad(){
        this.$nextTick(()=>{
          if(this.$refs.bannerHeight.length != 0){
            this.bannerHeight = this.$refs.bannerHeight[0].height
          }
        })
    }
  },
  mounted() {
    this.$store.dispatch("getBannerList");

    window.addEventListener('resize',this.imgLoad,false)
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.imgLoad,false)
  }
};
</script>

<style scoped lang="less">
.homePage {
  width: 100%;
  background-color: #f0f1f5;

  .header{
    position: sticky;
    /*固定定位*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
  .el-row:not(:first-child){
    box-sizing: border-box;
  }

  .carousel{
    margin-top: 30px;
    .el-carousel {
      width: 100%;
      :deep(img) {
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
      }
    }
  }


  .contentContainer {
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 180px;
      border-radius: 5px;
    }
    .contents {
      background-color: #ffffff;
    }
  }
}
</style>